<!-- Created Time:23/07/18 15:20:08 -->
<!-- Created By: Mande.Huang-->
<!-- Description：文件图标描述 -->
<template>
    <button @dblclick="openFolder(path, icon, title)" @click="isActive = true"
        :class="`${$store.state.folderSize.shortName} ${isActive && 'active'} folder`" v-click-outside="notActive">
        <img :src="require(`/src/assets/folder-icons/${icon}.svg`)" :width="$store.state.folderSize.size" :alt="title" />
        <p>{{ title }}</p>
    </button>
</template>

<script>
import { setFolder } from '@/helpers/folders';
import { getLocal } from '@/helpers/local';

export default {
    name: "FolderButton",
    data() {
        return {
            isActive: false,
        };
    },
    props: {
        icon: {
            required: true,
            type: String,
        },
        title: {
            required: true,
            type: String,
        },
        path: {
            required: true,
            type: String,
        },
    },
    methods: {
        openFolder(path, icon, title) {
            this.isActive = false;
            if (path && icon && title) {
                // 新建窗口（并且弹出），本地存储
                setFolder(title, icon, path);
                // 更新当前窗口
                this.$store.dispatch("fetchFolders", getLocal("windows-folders"));
            }
        },
        notActive() {
            this.isActive = false;
        },
    },
}
</script>

<style lang="scss" scoped>
button {
    max-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 5px;
    margin-right: 5px;

    //  这里的& 符号是 是button而且带有md类的元素
    &.md {
        width: 85px;
        min-height: 85px;
    }

    &.lg {
        width: 95px;
        min-height: 95px;
    }

    &.sm {
        width: 85px;
        min-height: 75px;
    }

    &:hover {
        background: #fffdfd1a;
        border: 1px dotted#ffffff8f;
    }

    &.active {
        background: rgb(92 173 253 / 29%);
        border: 1px solid rgb(79 167 255 / 80%);
    }

    p {
        margin-top: 4px;
        font-size: 13px;
        color: white;
        line-height: 17px;
    }
}
</style>
